<template>
  <div class="container">
    <TableCustom :columns="columns" :tableData="tableData" :hasToolbar="false" :hasPagination="false">
      <template #name="{ rows }">
        <el-input v-if="rows.editing" v-model="rows.name"></el-input>
        <span v-else>{{ rows.name }}</span>
      </template>
      <template #password="{ rows }">
        <el-input v-if="rows.editing" v-model="rows.password"></el-input>
        <span v-else>{{ rows.password }}</span>
      </template>
      <template #email="{ rows }">
        <el-input v-if="rows.editing" v-model="rows.email"></el-input>
        <span v-else>{{ rows.email }}</span>
      </template>
      <template #role="{ rows }">
        <el-select v-if="rows.editing" v-model="rows.role">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="普通用户" value="普通用户"></el-option>
        </el-select>
        <span v-else>{{ rows.role }}</span>
      </template>
      <template #operator="{ rows, index }">
        <template v-if="!rows.editing">
          <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(rows)">
            编辑
          </el-button>
          <el-button type="danger" size="small" :icon="Delete" @click="">
            删除
          </el-button>
        </template>
        <template v-else>
          <el-button type="success" size="small" :icon="Select" @click="rows.editing = false">
            保存
          </el-button>
          <el-button type="default" size="small" :icon="CloseBold" @click="handleCancel(rows, index)">
            取消
          </el-button>
        </template>
      </template>
    </TableCustom>
  </div>
</template>

<script setup lang="ts" name="table-editor">
import { ref } from 'vue';
import { Delete, Edit, CloseBold, Select } from '@element-plus/icons-vue';
import TableCustom from '@/components/table-custom.vue';
import {fetchPostData} from '@/api';

let columns = ref([
  { type: 'index', label: '序号', width: 55, align: 'center' },
  { prop: 'name', label: '用户名' },
  { prop: 'password', label: '密码' },
  { prop: 'email', label: '邮箱' },
  { prop: 'role', label: '角色' },
  { prop: 'operator', label: '操作', width: 180 },
])
const tableData = ref([]);
const getData = async () => {
  const res = await fetchPostData("/patentList", {
    'currentPage': 1,
    'pageSize': 20,
  },{}).then((response)=>{
    console.log(response);
    tableData.value = response.data.data.list;
  }).catch((error)=>{
    console.log(error);
  })
};
getData();

const rowData = ref({})

const handleEdit = (row) => {
  rowData.value = { ...row };
  row.editing = true;
};

const handleCancel = (row, index) => {
  row.editing = false;
  tableData.value[index] = { ...rowData.value };
};
</script>

<style scoped></style>
